<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<meta charset="UTF-8">
<title>TicketMonster</title>
    <script type="text/javascript">
        $(document).on("pageinit", "#page1", function(event){
            $.getJSON("rest/events", function(events) {
                // console.log("returned are " + events);
                var listOfEvents = $("#listOfItems");
                listOfEvents.empty();
                $.each(events, function(index, event) {
                    // console.log(event.name);
                    listOfEvents.append("<li><a href='#'>" + event.name + "</a>");
                });
                listOfEvents.listview("refresh");
            });
        });
    </script>

</head>
<body>
	<div data-role="page" id="page1">
		<div data-role="header">
			<a href="#" data-role="button" data-rel="back" data-icon="back">Back</a>
			<h1>TicketMonster</h1>
		</div>
		<div data-role="content">

			<ul data-role="listview" id="listOfItems" data-filter="true">
				<li><a href="#">Item 1</a></li>
				<li><a href="item2.html">Item 2</a></li>
				<li><a href="item3.html">Item 3</a></li>
			</ul>
		</div>
		<div data-role="footer">
			<h4></h4>
		</div>
	</div>
</body>
</html>